<template>
    <div class="dv-theme-1-lab row g-2" :class="[layoutClass, focusClass, globalThemeClass, globalActiveClass]">
        <div class="bg-lab-2 col-12 dv-spaceship dv-main-layout">
            <!-- Background -->
            <img src="#" alt="space" class="dv-bg space-sky">
            <img src="#" alt="space-ship" class="dv-bg space-ship">
            <inline-svg class="dv-bg atmosphere" :src="atmosphere"></inline-svg>
            <img src="#" alt="header" class="space-header">

            <!-- Ornaments -->
            <inline-svg class="dv-ornament-bed" :src="bed"></inline-svg>
            <inline-svg class="dv-ornament-rotary-table dv-ornament-rotary-table dv-rotary-table dv-rotary-table-3d" :src="rotary"></inline-svg>
            <div class="dv-ornament-five-star"></div>

            <!-- Views -->
            <!-- test for 6 views layout theme
            -->
            <div class="brief-view brief-view-xs size-wide pos-left  pos-top    ">
                <dv-view-bg :view-bg="viewBg"></dv-view-bg>
            </div>
            <div class="brief-view brief-view-xs size-wide pos-left  pos-middle ">
                <dv-view-bg :view-bg="viewBg"></dv-view-bg>
            </div>
            <div class="brief-view brief-view-xs size-wide pos-left  pos-bottom ">
                <dv-view-bg :view-bg="viewBg"></dv-view-bg>
            </div>
            <!-- test for 1 + 3 views layout theme
            <div class="brief-view brief-view-ln size-wide size-xs   pos-left   ">
                <dv-view-bg class="view-bg"></dv-view-bg>
            </div>
            -->
            <div class="brief-view brief-view-xs size-wide pos-right pos-top    ">
                <dv-view-bg :view-bg="viewBg"></dv-view-bg>
            </div>
            <div class="brief-view brief-view-xs size-wide pos-right pos-middle ">
                <dv-view-bg :view-bg="viewBg"></dv-view-bg>
            </div>
            <div class="brief-view brief-view-xs size-wide pos-right pos-bottom ">
                <dv-view-bg :view-bg="viewBg"></dv-view-bg>
            </div>
            <div class="detail-view-masker"></div>
            <div class="detail-view">
                <img src="#" alt="view-bg" class="view-bg">
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from "vuex";
    import FiveStar from "../FiveStar";
    import SvgRes from "../SvgRes"
    import DvViewBg from "../DvViewBg";

    export default {
        name: "ThemeProto1",
        components: {DvViewBg},
        data() {
            return {
                publicPath: process.env.BASE_URL,
                viewBg: require('../../assets/image/spaceship/views/view-bg-color.png')
            }
        },
        mounted() {
            FiveStar(document.getElementsByClassName("dv-ornament-five-star")[0], 1500)
        },
        computed: {
            ...mapGetters("dv_layout", ["layoutClass", "focusClass"]),
            ...mapGetters("dv_theme", ["globalThemeClass", "globalActiveClass"]),
            atmosphere: () => SvgRes["bg/atmosphere"],
            xsWide: () => SvgRes["views/view-brief-xs-wide"],
            bed: () => SvgRes["ornament/bed"],
            rotary: () => SvgRes["ornament/rotary-table"]
        }
    }
</script>

<style lang="scss">
    @use "sass:math";
    @import "@/assets/sass/style";

    .bg-lab-2 {
        max-width: 3840px !important;
        width: 1200px;
        height: 675px;
        @include dv-transform(scale(math.div(1200, $viewport-width), math.div(675, $viewport-height)));
        @include dv-transform-origin(0 0);
    }
</style>
